<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2244349_i2eqb9k2t3n.css">
    <link rel="stylesheet" href="./res/css/bootstrap-grid.min.css">
    <link rel='stylesheet' href="./res/css/bootstrap-reboot.min.css" />
    <link rel='stylesheet' href="./res/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./res/css/style.css">
    <link rel="icon"
        href="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=503544494,2815537457&fm=26&gp=0.jpg"
        type="image/x-icon">
    <script src="./res/js/codeRain.js"></script>
    <script src="./res/js/jquery-3.5.1.min.js"></script>
    <script src="./res/js/bootstrap.bundle.min.js"></script>
    <script src="./res/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/main.css">
    <title>前端工程师-黄钦潮个人简历</title>
</head>

<body>
    <!-- 联系作者模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">联系作者</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="client_alias">访客昵称</label>
                            <input type="text" class="form-control" placeholder="（选填）游客昵称" id="client_alias">
                        </div>
                        <div class="form-group">
                            <label for="client_mobile">联系号码</label>
                            <input type="text" class="form-control" placeholder="（必填）请输入联系号码" id="client_mobile">
                        </div>
                        <div class="form-group">
                            <label for="comment">留言内容</label>
                            <textarea class="form-control" rows="5" placeholder="（必填）请输入意向内容" id="comment"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button id="leaveMessageBtn" type="button"
                    class="btn btn-primary float-right">发送留言</button>
                </div>

            </div>
        </div>
    </div>
    <div class="container" id="content">
        <div class="row">
            <div class="col-md-12 padding-0 flag">
                <img src="./res/img/p1.jpg" alt="">
                <img src="./res/img/p2.jpg" alt="">
                <img src="./res/img/p3.jpg" alt="">
            </div>
        </div>
        <div class="row main">
            <div class="col-md-8">
                <div class="main-block">
                    <div class="row">
                        <div class="col-md-12 flex flex-align-center">
                            <img src="./res/img/avatar.jpg" class="rounded avatar" alt="Cinque Terre">
                            <div>
                                <h6 class="header-sub">你的名字</h6>
                                <p>个性签名个性签名个性签名个性签名个性签名个性签名个性签名</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                            <span class="header-title">求职意向</span>
                        </div>
                    </div>
                    <div class="line margin-10"></div>
                    <div class="row">
                        <div class='col-md-3'>
                            <div class="iconfont icon-jiankangzhuangkuang header-sub">意向岗位</div>
                            <div class="margin-left-sm">123</div>
                            <div class="margin-left-sm">123</div>
                            <div class="margin-left-sm">123</div>
                        </div>
                        <div class='col-md-3'>
                            <div class="iconfont icon-jiankangzhuangkuang header-sub">意向城市</div>
                        </div>
                        <div class='col-md-3'>
                            <div class="iconfont icon-jiankangzhuangkuang header-sub">期望薪资</div>
                        </div>
                        <div class='col-md-3'>
                            <div class="iconfont icon-jiankangzhuangkuang header-sub">求职状态</div>
                        </div>
                    </div>
                </div>
                <div class="main-block">
                    <div class="row">
                        <div class="col-md-12">
                            <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                            <span class="header-title">工作经验</span>
                        </div>
                    </div>
                    <div class="line margin-10"></div>
                    <div class="row">
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">时间</span>
                            <span class="header-sub">公司名称</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">岗位名称</span>
                        </div>
                        <div class="col-md-12">
                            <p>
                                哈哈还是毒啊hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式哈哈还是毒啊hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式
                            </p>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">时间</span>
                            <span class="header-sub">公司名称</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">岗位名称</span>
                        </div>
                        <div class="col-md-12">
                            <p>
                                哈哈还是毒啊hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式
                            </p>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">时间</span>
                            <span class="header-sub">公司名称</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">岗位名称</span>
                        </div>
                        <div class="col-md-12">
                            <p>
                                哈哈还是毒啊hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式哈哈还是毒啊hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式hi付hi苏ui方式
                            </p>
                        </div>
                    </div>
                </div>
                <div class="main-block">
                    <div class="row">
                        <div class="col-md-12">
                            <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                            <span class="header-title">项目经验</span>
                        </div>
                    </div>
                    <div class="line margin-10"></div>
                    <div class="row">
                        <div class="col-md-12 flex flex-justify-between">
                            <span>项目名称：</span>
                            <span>xxxxx项目</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span>负责内容：前端</span>
                        </div>
                        <div class="col-md-12">项目描述：</div>
                        <div class="col-md-12">含技术栈：</div>
                    </div>
                    <div class="row margin-top-sm">
                        <div class="col-md-12 flex flex-justify-between">
                            <span>项目名称：</span>
                            <span>xxxxx项目</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span>负责内容：前端</span>
                        </div>
                        <div class="col-md-12">项目描述：
                            <p>
                                这是一个xxxx项目这是一个xxxx项目这是一个xxxx项目
                                这是一个xxxx项目这是一个xxxx项目这是一个xxxx项目
                                这是一个xxxx项目
                            </p>
                        </div>
                        <div class="col-md-12">含技术栈：</div>
                    </div>
                </div>
                <div class="main-block">
                    <div class="row">
                        <div class="col-md-12">
                            <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                            <span class="header-title">教育背景</span>
                        </div>
                    </div>
                    <div class="line margin-10"></div>
                    <div class="row">
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">时间</span>
                            <span class="header-sub">学校名称</span>
                        </div>
                        <div class="col-md-12 flex flex-justify-between">
                            <span class="header-sub">专业：xxxx专业</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding-top: 140px;">
                <div class="msg-block">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="header-title">
                                <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                基本信息
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 offset-1">
                            <div>
                                <span>
                                    <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                    年龄
                                </span>
                                <span>19岁</span>
                            </div>
                            <div>
                                <span>
                                    <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                    工作
                                </span>
                                <span>2年经验</span>
                            </div>
                            <div>
                                <span>
                                    <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                    电话
                                </span>
                                <span>13085759937</span>
                            </div>
                            <div>
                                <span>
                                    <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                    邮箱
                                </span>
                                <span>1412891143@qq.com</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msg-block">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="header-title">
                                <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                技能特长
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 offset-1 margin-bottom margin-top-sm">
                            <div>xxx语言</div>
                            <div class="progress">
                                <div class="progress-bar bg-info" style="width:70%"></div>
                            </div>
                        </div>
                        <div class="col-md-12 offset-1 margin-bottom">
                            <div>xxx语言</div>
                            <div class="progress">
                                <div class="progress-bar bg-info" style="width:70%"></div>
                            </div>
                        </div>
                        <div class="col-md-12 offset-1 margin-bottom">
                            <div>xxx语言</div>
                            <div class="progress">
                                <div class="progress-bar bg-info" style="width:70%"></div>
                            </div>
                        </div>
                        <div class="col-md-12 offset-1 margin-bottom">
                            <div>xxx语言</div>
                            <div class="progress">
                                <div class="progress-bar bg-info" style="width:70%"></div>
                            </div>
                        </div>
                        <p class="text-right font-weight-light small offset-1">注：进度条为当前栈技术要点掌握程度</p>
                    </div>
                </div>
                <div class="msg-block">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="header-title">
                                <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                                我的优势
                            </div>
                        </div>
                        <div class="col-md-12" style="padding: 0 62px 0 42px;">
                            <p>
                                优势内容优势内容优势内容优势内
                                容优势内容优势内容优势内容优势内容优势内容优势内容
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 侧栏 -->
        <div class="aside text-center">
            <div class="card">
                <div class="card-header padding-0">
                    <i class="iconfont icon-jiankangzhuangkuang header-title"></i>
                    <div>点赞</div>
                </div>
                <div class="card-header padding-0">
                    <div>切换主题</div>
                </div>
                <div class="card-header padding-0">
                    <div data-toggle="modal" data-target="#myModal">
                        联系作者
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="rainBlank"></div>
</body>
<script>
    // 布局模块
    $(function () {
        // 生成数字雨背景
        let rain = new Rain({ dom: document.getElementById("rainBlank"), speed: 30 });
        rain.init();
        document.body.oncontextmenu = function () {
            alert("李在干什么");
            return false
        }
    })




</script>

</html>